<template>
    <view class="container">
        <view class="title-box">
            <view class="title">
                手机号登录
            </view>
            <view class="desc">
                未注册手机号验证通过后将自动注册
            </view>
        </view>
        <view class="button-box">
            <button class="c-button_clear c-button-size_base c-button-width_full button login" open-type="getUserInfo"
                @getuserinfo="tapLogin">
                登录 / 注册
            </button>
            <view class="c-button_clear c-button-size_base c-button-width_full button unlogin" @click="tapCancel">
                暂不登录
            </view>
        </view>
        <view class="terms-box" @click="tapTerms">
            <uni-icons type="checkbox-filled" size="20" color="#FECF02" v-if='checkTerms'></uni-icons>
            <uni-icons type='circle' size="20" color="#999" v-else></uni-icons>
            <view class="terms-info">
                登录前请先阅读<text class="terms">《用户隐私协议》</text>
            </view>
        </view>
        <ws-wx-privacy id="privacy-popup" @disagree="handleDisagree" @agree="handleAgree" title="用户隐私保护提示"
            desc="感谢您使用本应用，您使用本应用的服务之前请仔细阅读并同意" protocol="《用户隐私保护指引》"
            subDesc="。当您点击同意并开始时用产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法使用相应服务。"></ws-wx-privacy>
        <get-phone-number-pop ref='getPhoneNumberPop' @getPhoneNumber='getPhoneNumber'></get-phone-number-pop>
    </view>
</template>

<script>
    import {
        getContext,
        getComponent
    } from "../../uni_modules/ws-wx-privacy/components/ws-wx-privacy/util.js"
    import {
        wxLogin,
        getOpenId,
        loginAction,
    } from "./services/index.js"
    import {
        readStorage,
        saveStorage
    } from '../../common/utils/storageUtil';
    import {
        saveToken,
        saveUserInfo
    } from "../../common/services/user-service.js";
    import {
        postNotification
    } from "../../common/utils/notificationCenter.js";
    import {
        KEY_NOTIFICATION_LOGIN_SUCCESS
    } from "../../static/keys/notification-keys.js";
    const Key_Storage_TermsConfirm = "key_storage_termsConfirm";
    import GetPhoneNumberPop from "./components/get-phone-number-pop.vue";
    export default {
        components: {
            GetPhoneNumberPop
        },
        data() {
            return {
                isConfirmTerms: false,
                openId: null,
                sessionKey: null,
                unionId: null,

                showTerms: false,
                logining: false
            };
        },
        onShow() {
            this.isConfirmTerms = readStorage(Key_Storage_TermsConfirm);
            //#ifdef MP-WEIXIN
            wx.requirePrivacyAuthorize({
                success: () => {
                    console.log('点击同意');
                },
                fail: () => {
                    console.log('点击拒绝');

                },
                complete: () => {
                    console.log('用户已点击');
                }
            })
            //#endif
        },
        computed: {
            checkTerms: function() {
                return this.isConfirmTerms;
            }
        },
        methods: {
            getPhoneNumber(e) {
                console.log("getPhoneNumber", e);
                uni.showLoading({
                    title: "登录中"
                })
                loginAction(e.openId, e.encryptedData, e.iv, e.sessionKey, e.avatarUrl, e.nickName, e.gender).then(
                    res => {
                        const {
                            id,
                            username,
                            nickname,
                            avatar,
                            intro,
                            status,
                            gender,
                            roleId
                        } = res && res.user ? res.user : {};
                        saveUserInfo({
                            id,
                            userName: username,
                            nickName: nickname,
                            avatar,
                            intro,
                            status,
                            gender,
                            roleId
                        })
                        saveToken(res.token)
                        postNotification(KEY_NOTIFICATION_LOGIN_SUCCESS);
                        uni.navigateBack()
                    }).finally(() => {
                    uni.hideLoading();
                })
            },
            tapLogin(e) {
                if (this.logining) return;
                if (!this.isConfirmTerms) {
                    uni.showToast({
                        title: "未确认隐私条款",
                        icon: 'none'
                    })
                    return;
                }
                this.logining = true;
                console.log("tapLogin", e);
                uni.login({
                    provider: "weixin",
                    onlyAuthorize: true,
                    success: (res) => {
                        if (res) {
                            getOpenId(res.code).then(res => {
                                const {
                                    nickName,
                                    gender,
                                    avatarUrl,
                                } = e.detail.userInfo;
                                const {
                                    openid,
                                    session_key,
                                    unionid
                                } = res;
                                this.$refs.getPhoneNumberPop.openGetPhoneNumberPop(true, {
                                    nickName,
                                    gender,
                                    avatarUrl,
                                    openId: openid,
                                    sessionKey: session_key,
                                    unionId: unionid
                                })
                            }).finally(() => {
                                this.loading = false;
                            })
                        } else {
                            this.loading = false;
                        }
                    },
                    fail: (error) => {
                        this.loading = false;
                    }
                })
            },
            tapCancel() {
                uni.navigateBack()
            },
            tapTerms() {
                const privacyPopup = getComponent(getContext(), '#privacy-popup')
                if (privacyPopup) {
                    const privacy = getComponent(privacyPopup, '#privacy')
                    privacy.open()
                }
            },
            handleDisagree() {
                this.isConfirmTerms = false;
                saveStorage(Key_Storage_TermsConfirm, this.isConfirmTerms)
            },
            handleAgree() {
                this.isConfirmTerms = true;
                saveStorage(Key_Storage_TermsConfirm, this.isConfirmTerms)
            }
        }
    }
</script>

<style lang="scss">
    @import "@/static/styles/style_value.scss";

    .container {
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 100vh;

        .title-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 25%;

            .title {
                font-size: 48rpx;
                color: #333;
                font-weight: 800;
                text-align: center;
            }

            .desc {
                font-size: 36rpx;
                color: #999;
                text-align: center;
                margin-top: 30rpx;
            }
        }

        .button-box {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .button {
                background: $c-color-theme;
                color: #333;
                text-align: center;
                font-size: 36rpx;
                margin-bottom: 20rpx;
            }

            .button:last-child {
                margin-bottom: 0;
            }

            .login {
                background: #FECF02;
                color: #333;
                font-weight: 700;
            }

            .unlogin {
                background: transparent;
                color: #007aff;
            }
        }

        .terms-box {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            height: 25%;
            font-size: 28rpx;

            .terms-info {
                color: #888;

                .terms {
                    color: #007aff;
                }
            }
        }
    }
</style>